<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true">
			<block slot="content">
				学校编辑
			</block>
		</cu-custom>
		<view>
			<view class="apply_box flex">
				<view class="con_text">学校名称</view>
				<input class="con_infom" placeholder="请输入学校名称" v-model="school_name" />
			</view>
			<view class="apply_box1 flex">
				<view class="con_text1">学校logo</view>
				<view class="con_infom1 flex">
					<image :src="logo" class="logo_img" @click="priv_img(logo)" v-if="logo"></image>
					<view v-if="!logo" class="nologo_img" style="background-color: #007AFF;">{{school_name[0]}}</view>
					<wzh-upload :count="1" :value.sync="logo">
						<view class="iconfont icon-you1 right_box right_icon"></view>
					</wzh-upload>
				</view>
			</view>
			<view class="apply_box flex">
				<view class="con_text">联系人</view>
				<input class="con_infom" placeholder="请输入姓名" v-model="contacts" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">电话</view>
				<input class="con_infom" placeholder="请输入电话号码" v-model="phone" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">地址</view>
				<input class="con_infom" placeholder="请输入学校地址" v-model="address" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">校长姓名</view>
				<view><input class="con_infom" placeholder="请输入校长姓名" v-model="principal" /></view>
			</view>


			<view class="apply_boxone">
				<view style="display: flex;position: relative; ">
					<view class="con_text" >学院设置</view>
					<view class="con_text2" @tap="hidetext" data-target="bottomModal">添加</view>
				</view>

			</view>
			<!-- 学院标签 -->
			<view class="apply_box ">
				<view class="sm_text"  v-for="(item,index) in branch_sys" :key='index'>
					<view class='bgcolor'>{{item}}</view>
				<view class="cuIcon-close cuIcon-close1" @click="sub_branch_sys(index)" ></view>
				</view>
			</view>

			<!-- 上传学校照片 -->
			<view class="apply_box2 lastbox" style="border-bottom-width:0">
				<view class="con_text">上传学校照片</view>
				<view class="cu-form-group" style="padding-left: 0rpx;padding-top: 30rpx;">
					<view class="grid col-3 grid-square flex-sub" style="padding-bottom: 120rpx;">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill" v-model="image"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<wzh-upload @onUpload="imageUpload" class="up-img">
							<view class="cuIcon-cameraadd"></view>
						</wzh-upload>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view style="position: relative;margin-top: 20rpx;">
					<view class="iconfont icon-guanbi text-gray"
						style="position: absolute;right: 30rpx;padding-top: 5rpx;" @tap="hideModal"></view>
					<view style="width: 100%;height: auto;font-size: 32rpx;">增加设置</view>
				</view>
				<view class="padding-xl" style="height: 300rpx;">
					<view class="b_input">
						<view class="text_b">学院标签:</view>
						<view class="text_c"> <input class="input_a" placeholder="请输入学院标签"
								v-model="branch_sys_name"></input> </view>
					</view>
					<button class="button" @click="add_branch_sys()">确定</button>
				</view>

			</view>
		</view>
		<!-- 确定提交信息弹框 -->
		<view class="cu-bar bg-white margin-top">	
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl" style="background-color: #FFFFFF;">
					是否提交修改信息？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="getsave(school_id)">确定</button>
		
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="cu-bar tabbar bg-white foot">
			<button class="cancel_but" @click="back(school_id)">取消</button>
			<button class="submit_but" @tap="showModal" data-target="DialogModal1">提交</button>
		</view>

	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				modalName: null,
				school_id: '',
				school_name: '',
				logo: '',
				contacts: '',
				phone: '',
				address: '',
				principal: '',
				// images: '0',
				list: [],
				branch_sys: ['', ],
				imgList: [],
				branch_sys_name: '',
			}
		},
		onLoad(option) {
			appLogin((user_info) => {
				console.log(user_info)
				this.school_id = option.school_id
				console.log(this.school_id)
				this.getinfo()
			})
		},
		methods: {

			//编辑信息
			getsave(school_id) {
				httpPost({
					url: '/api/school/save',
					data: {
						school_name: this.school_name,
						logo: this.logo,
						contacts: this.contacts,
						phone: this.phone,
						address: this.address,
						principal: this.principal,
						images: this.imgList,
						branch_sys: this.branch_sys,
					  
					}
				}).then((res) => {
					console.log(res)
					console.log('这是学校编辑')
					msg("操作成功",()=>{
						uni.redirectTo({
							url: 'people_center?school_id=' + school_id
						})
					})
					// uni.showToast({
					// 	title:"操作成功"
					// })
					// setTimeout(()=>{
					// 	uni.redirectTo({
					// 		url: 'people_center?school_id=' + school_id
					// 	})
					// },2000)
					this.hideModal()

				}).catch((err)=>{
					msg(err.msg,'none')
				})
			},
			add_branch_sys() {
				if (!this.branch_sys_name) {
					uni.showToast({
						icon: 'none',
						title: '请输入标签内容'
					})
				} else {
					this.branch_sys.push(this.branch_sys_name)
					this.hideModal()
				}

			},
			sub_branch_sys(index) {
				this.branch_sys.splice(index, 1)
			},
			hidetext(e) {
				this.branch_sys_name = ''
				this.showModal(e)
			},

			getinfo() {
				httpGet({
					url: '/api/school/info',
					data: {
						school_id: this.school_id
					}
				}).then((res) => {
					console.log('显示信息')
					console.log(res)
					this.school_name = res.result.school_name
					this.logo = res.result.logo
					this.contacts = res.result.contacts
					this.phone = res.result.phone
					this.address = res.result.address
					this.principal = res.result.principal
					this.branch_sys = res.result.branch_sys
					if(res.result.images)this.imgList = res.result.images
				})
			},

			// 展示model
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				
			},
			// 隐藏model
			hideModal(e) {
				this.modalName = null
			},
			//查看图片
			priv_img(logo) {
				var images = [];
				images.push(logo);
				uni.previewImage({
					current: 0,
					urls: images,
				});
			},

			// 上传照片
			imageUpload(res) {
				this.imgList.push(res)
				// console.log(res)
			},
			// 删除照片
			DelImg(e) {
				uni.showModal({
					title: '',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// skip_center(school){
				
			// }
			back(school_id) {
				uni.redirectTo({
					url: 'school_instroduce?school_id=' + school_id
				})
			}
		}
	}
</script>

<style>
	.apply_boxone {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FFFFFF;
		font-size: 30rpx;
		padding-left: 38rpx;
		color: #333333;
	}

	.apply_box {
		display: flex;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
		flex-flow: row wrap;
	}

	.apply_box1 {
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
	}

	.apply_box2 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
	}

	.box {
		height: 100rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #FFFFFF;
		position: relative;
	}

	.b_input {
		background-color: #FFFFFF;
		border: 1rpx solid rgba(182, 182, 182, 0.5);
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.text_b {
		padding-left: 20rpx;
		text-align: left;
		font-size: 30rpx;
		line-height: 80rpx;
		width: 30%;
	}

	.text_c {

		line-height: 80rpx;
		width: 75%;
	}

	.input_a {

		text-align: left;
		height: 80rpx;
	}

	.button {
		outline: none;
		text-align: center;
		margin-top: 10rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		border: 1rpx solid;
		font-size: 30rpx;
		height: auto;
		border-radius: 60rpx;
		width: 250rpx;
	}

	.con_text {
		color: #989898;
		font-size: 30rpx;
	}

	.con_text1 {
		color: #989898;
		font-size: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.con_text2 {
		position: absolute;
		right: 40rpx;
		color: #0081FF;
	}

	.con_infom {
		position: absolute;
		right: 35rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
		width: 750rpx;
	}

	.con_infom1 {
		position: absolute;
		right: 35rpx;
		margin-top: 12rpx;

	}

	.right_icon {
		padding-left: 10rpx;
		font-size: 40rpx;
		padding-top: 30rpx;
	}

	.cancel_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}

	.sm_text {
		position: relative;
	}

	.bgcolor {
		background-color: rgb(117, 157, 249);
		line-height: 55rpx;
		text-align: center;
		font-size: 25rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
	}

	.logo_img {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
	}
	.nologo_img {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		background-color: #007AFF;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.submit_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.time {
		text-align: center;
		position: absolute;
		bottom: 0;
		height: 120rpx;
		background-color: #FFFFFF;
		width: 100%;
		line-height: 120rpx;
		font-size: 30rpx;
		color: #333333;
		border-top-width: 2rpx;
		border-top-color: #e6e6e6;
		border-top-style: solid;
	}

	/* 上传学校照片样式 */
	.up-img {
		flex-wrap: wrap;
	}

	.cuIcon-cameraadd {
		color: #a7a7a7;
		font-size: 70rpx;
		padding: 30rpx;
	}
	.cuIcon-close{
	  position: absolute;
	 right: 5rpx;
	  top: 5rpx;
	  color: #FFFFFF;
	  border-radius: 30rpx;
	  font-size: 30rpx;
}
	.cuIcon-close1 {
		position: absolute;
		right: 15rpx;
		top: 5rpx;
		background-color: red;
		color: #FFFFFF;
		border-radius: 30rpx;
		font-size: 20rpx;
	}
</style>
